<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 方括号[]少用 */
        /* img[alt]            选择有alt的img标签*/
        /* img[alt="故宫"]     就是*/
        /* img[alt^="故宫"]    开头 */
        /* img[alt$="故宫"]    结尾*/
        /* img[alt*="故宫"]    含有*/
        /* img[alt~="故宫"]    有空格隔开的"故宫"*/
        /* img[alt|="故宫"]    alt以“故宫-”开头的img*/
        img{width:20px}
        img[alt]{border: 1px solid red;}

        img[alt="11"]{border: 1px solid orange;;}
        img[alt^="2"]{border: 1px solid yellow;}
        img[alt$="3"]{border: 1px solid green;}
        img[alt*="4"]{border: 1px solid blue;}
        /* ppppppppp  55    55前面有空格 */
        img[alt~="55"]{border: 1px solid purple;}
        /* 66-pppppppp   有- */
        img[alt|="66"]{border: 1px solid #000;}
    </style>
</head>
<body>
    <img src="12.png" alt="">
    <img src="12.png" alt="11">
    <img src="12.png" alt="22qqqqqq">
    <img src="12.png" alt="qqqqqq33">
    <img src="12.png" alt="4weferg4">
    <img src="12.png" alt="ppppp 55">
    <img src="12.png" alt="66-ppppp">
</body>
</html>